<template>
  <div>
    <div class="demo-nav">
      <i class="van-icon van-icon-arrow-left van-nav-bar__arrow" style="left: -115px;font-size: 20px" @click="goBack"></i>
      <div class="demo-nav__title" style="margin-left: -10px">个人资料设置</div>
    </div>
    <div>
      <van-form @submit="onSubmit">
        <van-cell title="头像" style="line-height: 65px">
          <van-uploader :deletable="false" :preview-full-image="false" :after-read="afterRead">
            <img :src="img" style="width: 65px;height: 65px"></img>
          </van-uploader>
        </van-cell>
        <van-field
            v-model="form.username"
            label="昵称"
            placeholder="昵称"
            input-align="right"
        />
        <van-field
            readonly
            clickable
            name="picker"
            :value="form.sex"
            label="性别"
            placeholder="请选择性别"
            input-align="right"
            @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
          />
        </van-popup>
        <van-field
            v-model="form.email"
            label="邮箱"
            placeholder="邮箱"
            input-align="right"
        />
        <van-field
            v-model="form.phone"
            label="电话号码"
            placeholder="电话号码"
            input-align="right"
            readonly
        />
        <van-field
            v-model="form.aboutme"
            rows="2"
            autosize
            label="简介"
            type="textarea"
            maxlength="50"
            placeholder="简介"
            show-word-limit
            input-align="right"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">保存</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<style>
.demo-nav {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: 56px;
  background-color: #fff;
}
.demo-nav__title {
  font-weight: 600;
  font-size: 17px;
  text-transform: capitalize;
}
</style>
<script>
import axios from "axios";

export default {
  data() {
    return {
      r_file:'',
      img:'',
      value: '',
      columns: ['男', '女'],
      showPicker: false,
      user_id:'',
      form: {
        id:'',
        username:'',
        avatar:'http://47.109.38.52:80/group1/M00/00/00/rBIu8WL2NLmAZeRIAAAP1gIBsl4390.jpg',
        sex:'',
        phone:'',
        aboutme:'',
        email:'',
      }
    }
  },
  created() {
    var _this = this;
    _this.user_id = _this.$route.query.user_id
    axios.get('/user_edit/user/'+_this.user_id).then(
        Response =>{
          _this.form = Response.data;
          _this.img = Response.data.avatar
          if(_this.form.sex==1){
            _this.form.sex="男"
          }else {
            _this.form.sex="女"
          }
        }
    )
  },
  methods: {
    goBack(){
      this.$router.push("setting");
    },
    afterRead(file,detail){
      // alert(file.name)
      this.img = URL.createObjectURL(file.file)
      this.r_file = file.file
      // alert(file.file.name)
      // console.log(file)
    },
    onConfirm(value) {
      this.form.sex = value;
      this.showPicker = false;
    },
    onSubmit() {
      var _this = this
      if(_this.form.sex=="男"){
        _this.form.sex="1"
      }else {
        _this.form.sex="2"
      }
      var fd = new FormData();
      fd.append('user',JSON.stringify(_this.form));
      if(_this.r_file==""){
        _this.axios({
          method:"post",
          url:"/user_edit/user/edit-noFile",
          data: fd,
        }).then(function (){
          _this.$router.push("/setting?user_id="+_this.user_id);
        })
      }
      else {
        fd.append('file',_this.r_file)
        _this.axios({
          method:"post",
          url:"/user_edit/user/edit",
          data: fd,
        }).then(function (){
          _this.$router.push("/setting?user_id="+_this.user_id);
        })
      }
    },
    changeImg(){
      alert("1")
    }
  }
}
</script>

<style scoped>

</style>